<template>
  <div style="border: 1px solid #ccc">
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editor"
      :defaultConfig="toolbarConfig"
      :mode="mode"
    />
    <!-- v-model="html"  -->
    <Editor
      style="height: 500px; overflow-y: hidden; text-align: left"
      :mode="mode"
      v-model="html"
      :defaultConfig="editorConfig"
      @onCreated="onCreated"
    />
    <button @click="hq">huoqu</button>
  </div>
</template>
<script>
import Vue from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";

export default Vue.extend({
  components: { Editor, Toolbar },
  props: {
    value: {
      type: String,
      default: ""
    }
  },
  created() {
    console.log(this.value, "adada");
    setTimeout(() => {
      console.log(this.value, "adada");
      this.html = this.value;
    }, 1000);
  },
  watch: {
    html(value) {
      console.log(111);
      // this.html = this.value;
      this.$emit("input", value);
    },
    value() {
      console.log(2222);
      this.html = this.value;
    }
  },
  data() {
    return {
      editor: null,
      html: this.value,
      toolbarConfig: {},
      editorConfig: { autoFocus: false, MENU_CONF: { justifyLeft: 1 } },
      mode: "simple" // default or 'simple'
    };
  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
      // this.editor.MENU_CONF.justifyLeft = true;
    },
    hq() {
      // 哈哈哈看到女鬼剑看到那个
      console.log(this.editor);
      // console.log(this.editor.getHtml());
      // console.log(this.editor.isFocused());
      console.log(this.editor.getConfig());
    }
  },
  mounted() {
    // 模拟 ajax 请求，异步渲染编辑器
    // setTimeout(() => {
    //   this.html = "<p>模拟 Ajax 异步设置内容 HTML</p>";
    // }, 1500);
  },
  beforeDestroy() {
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy(); // 组件销毁时，及时销毁编辑器
  }
});
</script>
<style lang="less" scoped>
@import "@wangeditor/editor/dist/css/style.css";
</style>
